<template>
  <el-card class="box-card">

    <my-bread level1="权限管理" level2="角色列表"></my-bread>
    <el-row style="margin-top: 20px;">
      <el-col>
        <el-button type="info">添加角色</el-button>
      </el-col>
    </el-row>
    <el-table height="700px" :data="roleList" style="margin-top: 20px;width: 100%">
      <el-table-column type="expand" width="150px">
        <template slot-scope="props">
          <el-row v-for="item,key in  props.row.children" :key ="key">
            <el-col :span="4">
              <el-tag @close = "deleteRight(props.row,item.id)" closable>
                {{item.authName}}
              </el-tag>
              <i class="el-icon-arrow-right"></i>
            </el-col>
            <el-col :span="20">
              <el-row v-for="item1,key1 in  item.children" :key ="key1">
                <el-col :span="4">
                  <el-tag @close = "deleteRight(props.row,item1.id)" closable type="success">
                    {{item1.authName}}
                  </el-tag>
                  <i class="el-icon-arrow-right"></i>
                </el-col>
                <el-col :span="20">
                      <el-tag v-for="item2,key2 in  item1.children" :key ="key2" @close = "deleteRight(props.row,item2.id)" closable type="info">
                        {{item2.authName}}
                      </el-tag>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <span v-if ="props.row.children.length === 0">没有赋予角色</span>
        </template>
      </el-table-column>
      <el-table-column type="index" prop="id" label="#">
      </el-table-column>
      <el-table-column prop="roleName" label="角色名称">
      </el-table-column>
      <el-table-column prop="roleDesc" label="描述">
      </el-table-column>
      <el-table-column prop="mg_state" label="操作">
        <template slot-scope="scope">
          <el-button plain size="mini" type="primary" @click="dialogFormVisibleEditShow(scope.row)" icon="el-icon-edit"></el-button>
          <el-button plain size="mini" @click="showDeleteDialog(scope.row.id)" type="danger" icon="el-icon-delete"></el-button>
          <el-button plain size="mini" type="success" @click="showGiveRoleRightDialog(scope.row)" icon="el-icon-check"
            circle></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分配权限对话框
    :default-expanded-keys="[2, 3]"
    :default-checked-keys="[5]"
    -->
    <el-dialog title="分配角色权限" :visible.sync="dialogFormVisibleRight">
      <div slot="footer" class="dialog-footer">
        <el-tree
          ref ="treeref"
          :data="rightList"
          show-checkbox
          node-key="id"
          default-expand-all
          :default-checked-keys="defaultCheck"
          :props="defaultProps">
        </el-tree>

        <el-button @click="dialogFormVisibleRight=false">取 消</el-button>
        <el-button type="primary" @click.prevent="giveUserRoleRight()">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  created () {
    this.queryRoleList()
  },
  data () {
    return {
      roleList: [],
      dialogFormVisibleRight: false,
      rightList: [],
      currentEditRole: -1,
      defaultProps: {
        label: 'authName',
        children: 'children'
      },
      defaultCheck: []

    }
  },
  methods: {

    async showGiveRoleRightDialog (role) {
      this.rightList = []
      this.defaultCheck = []
      this.dialogFormVisibleRight = true
      this.currentEditRole = role.id
      const res = await this.$http.get('rights/tree')
      console.log(res)
      const {
        data,
        meta: {status, msg}
      } = res.data
      if (status === 200) {
        this.rightList = data
      } else {

      }
      role.children.forEach(item => {
        // this.defaultCheck.push(item.id)
        item.children.forEach(item1 => {
          // this.defaultCheck.push(item1.id)
          item1.children.forEach(item2 => {
            this.defaultCheck.push(item2.id)
          })
        })
      })
    },
    async giveUserRoleRight () {
      var arr1 = this.$refs.treeref.getCheckedKeys()
      var arr2 = this.$refs.treeref.getHalfCheckedKeys()
      var arr = [...arr1, ...arr2]
      const res = await this.$http.post('roles/' + this.currentEditRole + '/rights', {'rids': arr.splice('').join(',')})
      const {meta: {status, msg}} = res.data
      if (status === 200) {
        this.$message.success(msg)
        this.queryRoleList()
      } else {
        this.$message.success(msg)
      }
      this.dialogFormVisibleRight = false
    },
    async deleteRight (role, rightId) {
      // roles/:roleId/rights/:rightId  delete
      const res = await this.$http.delete('roles/' + role.id + '/rights/' + rightId)
      console.log(res)
      const {meta: {status, msg}, data} = res.data
      if (status === 200) {
        this.$message.success(msg)
        role.children = data
      }
    },
    async queryRoleList () {
      const res = await this.$http.get('roles')
      console.log(res)
      const {
        data,
        meta: {
          status,
          msg
        }
      } = res.data
      if (status === 200) {
        this.roleList = data
      }
    }
  }
}
</script>

<style>
</style>
